<template>
  <div>
    <div>
      <span style="margin-left:30px;">订单编号：</span>
      <el-input v-model="condition.orderId" placeholder="请输入内容" style="width:20%"></el-input>
      <span style="margin-left:30px;">用户名：</span>
      <el-input v-model="condition.username" placeholder="请输入内容" style="width:20%"></el-input>
      <span style="margin-left:30px;">收件人姓名：</span>
      <el-input v-model="condition.receiverName" placeholder="请输入内容" style="width:20%"></el-input>
      <el-button type="primary" plain style="margin-left:30px;" @click="search(1)">搜索</el-button>
      <el-button type="primary" plain style="margin-left:30px;" @click="reset(1)">重置</el-button>
    </div>
    <div class="table_div">
      <el-table :data="orders" border
            style="width: 100%;">
          <el-table-column prop="orderId" label="订单ID" align="center" width="150px"></el-table-column>
          <el-table-column prop="username" label="用户名" align="center"></el-table-column>

          <el-table-column prop="orderItem" label="订单项" align="center" width="1100px">
            <template slot-scope="scope">
                <el-table :data="scope.row.orderItem">
                  <el-table-column prop="itemId" label="订单项ID" align="center"></el-table-column>
                  <el-table-column prop="productId" label="商品ID" align="center"></el-table-column>
                  <el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
                  <el-table-column prop="productImg" label="商品图片" align="center">
                    <template slot-scope="scope">
                      <img :src="scope.row.productImg | img" style="width:100%;heigt:100%;">
                    </template>
                  </el-table-column>
                  <el-table-column prop="skuId" label="skuID" align="center"></el-table-column>
                  <el-table-column prop="skuName" label="skuName" align="center"></el-table-column>
                  <el-table-column prop="productPrice" label="商品价格" align="center"></el-table-column>
                  <el-table-column prop="buyCounts" label="购买数量" align="center"></el-table-column>
                  <el-table-column prop="totalAmount" label="总价格" align="center"></el-table-column>
                  <el-table-column prop="buyTime" label="购买时间" align="center"></el-table-column>
                  <el-table-column prop="isComment" label="是否评论了" align="center">
                    <template slot-scope="scope">
                      {{scope.row.isComment == 0?"否":"是"}}
                    </template>
                  </el-table-column>

                </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="receiverName" label="收件人姓名" align="center"></el-table-column>
          <el-table-column prop="receiverMobile" label="收件人电话" align="center"></el-table-column>
          <el-table-column prop="receiverAddress" label="收件人地址" align="center"></el-table-column>
          <el-table-column prop="totalAmount" label="总价格" align="center">
            <template slot-scope="scope">
                {{scope.row.actualAmount | money}}
            </template>
          </el-table-column>
          <el-table-column prop="actualAmount" label="实际数量" align="center"></el-table-column>
          <el-table-column prop="payType" label="支付类型" align="center">
            <template slot-scope="scope">
                {{scope.row.payType == '1' ? '支付宝' : '微信'}}
            </template>
          </el-table-column>
          <el-table-column prop="orderRemark" label="订单备注" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
                {{scope.row.status | statusTran}}
            </template>
          </el-table-column>
      </el-table>
    </div>
    <div class="block">
        <el-pagination
          ref="Pagination"
          background
          layout="prev, pager, next"
          @current-change="search"
          :current-page.sync='cur_page'
          :total='total'>
        </el-pagination>
    </div>
  </div>
</template>

<script>
import http from '@/core/httpRequest.js'

export default {
  data() {
    return {
      condition: {
        orderId: '',
        username: '',
        receiverName: '',
        page: "1",
        limit: "10"
      },
     orders: [
        {
          orderId: '',
          username: '',
          receiverName: '',
          receiverMobile: '',
          receiverAddress: '',
          totalAmount: '',
          actualAmount: '',
          payType: '',
          orderRemark: '',
          status: '',
          orderItem: []
        }
      ],
        total: 1,
        cur_page: 0,
        tableNewData: [],
        hoverOrderArr: [],
        orderIndex: []
      
    }
  },
  mounted() {
    this.search(1)
  },
  methods: {
    search(page) {
      if(page == 1){
        this.cur_page = 1
      }
        this.condition.page = page
      http.post(`/order/search`,this.condition).then(res => {
        let data = res.data
        this.orders = data.data.orders
        this.total=data.data.total
      })
    },
    reset(page){
      this.condition.orderId = "",
      this.condition.username = "",
      this.condition.receiverName = "",
       http.post(`/order/search`,this.condition).then(res => {
        let data = res.data
        this.orders = data.data.orders
        this.total=data.data.total
      })
    },
    
    
    
  }
}
</script>
<style>
  .block{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>